<template>
      <form action="" @submit="submit" :style="{height:myStyle.height+'rem',backgroundColor:myStyle.bgcolor,lineHeight:myStyle.height+'rem'}">
          <img src="./img/search.png" @click="submit" :style="{top:myStyle.height/4+'rem'}">
          <input type="search" :placeholder="myStyle.remind" v-model="value">
          <img v-show="closeShow" src="./img/back.png" class="back" @touchend="back($event)">
      </form>
</template>
<script>
export default {
  props:['submit','ylstyle'],
  data(){
      return {
          myStyle:{
            height:'',//高度，必须
            bgcolor:'',//背景，可选
            remind:'',//placeholder可选
          },
          value:""
      }
  },
  watch:{
      value(newVal,oldVal){
          this.$emit("getValue",newVal)
      }
  },
  computed:{
      closeShow(){
          if(this.ylstyle.close){
              return this.ylstyle.close
          }else{
              return false
          }
      }
  },
  methods:{
      back(e){
          e.preventDefault;
          this.$router.back()
      },
      tran(){//接收父组件的值，并进行判断
            this.myStyle.height=this.ylstyle.height;
                if(this.ylstyle.remind){
                    this.myStyle.remind=this.ylstyle.remind
                }
                if(this.ylstyle.bgcolor){
                    this.myStyle.bgcolor=this.ylstyle.bgcolor
                }
      }
  },
  activated(){
      this.tran()
  },
  mounted(){
      this.tran()
  }
}
</script>
<style lang="less" scoped>
@import "~less/base";
form{
    position: relative;
    input{//输入框样式
        border:none;
        width: 82%;
        height: .6rem;
        border-radius:.1rem;
        margin-left: .2rem;
        padding-left: .2rem;
        font-size: 14px;
        padding-right: .8rem;
        background-color: @color-inputBack1;
    }
    img{
        position: absolute;
        width: .4rem;
        left: 78%;
        top: .25rem;
    }
    .back{
       left: 90%;
    }
}
</style>
